<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="70%"
    @close="emits('closeDialog')"
  >
    <el-timeline style="padding-left: 50px">
      <el-timeline-item
        v-for="(item, index) in auditHistory"
        :timestamp="item.audit_level + '审：' + item.level_name"
        :type="item.type"
        :hollow="!item.his_order_id"
        placement="top"
      >
        <el-card shadow="never" v-if="item.his_order_id">
          <p>审核组：{{ item.his_group_name }}</p>
          <p>审核人：{{ item.his_audit_user }}</p>
          <p>审核时间：{{ formatDates(item.his_createtime) }}</p>
          <p>
            审核结果：<el-tag
              :type="item.his_audit_result == 'pass' ? 'success' : 'danger'"
              >{{ item.his_audit_result == "pass" ? "通过" : "拒绝" }}</el-tag
            >
          </p>
          <p v-if="item.his_remark">备注：{{ item.his_remark }}</p>
        </el-card>
        <el-card shadow="never" v-else>
          <p>审核组：{{ item.group_name }}</p>
          <!--<p>审核人：{{ item.audit_user }}</p>-->
          <p>审核状态：<el-tag type="warning">等待审核</el-tag></p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="rules"
      v-if="btnType == 'audit'"
    >
      <el-form-item label="提现总金额" :label-width="formLabelWidth">
        <el-tag type="danger"
          >{{ dialogForm.amount }} {{ dialogForm.currency }}</el-tag
        >
      </el-form-item>
      <el-form-item
        label="审核结果"
        :label-width="formLabelWidth"
        prop="review_status"
      >
        <el-radio-group v-model="dialogForm.review_status">
          <el-radio key="1" label="1">通过</el-radio>
          <el-radio key="2" label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="审核意见"
        :label-width="formLabelWidth"
        prop="review_reason"
      >
        <el-input v-model="dialogForm.review_reason" type="textarea" rows="3" />
      </el-form-item>
      <div v-if="dialogForm.cus_audit_level == auditHistory.length">
        <el-form-item
          label="付款金额"
          :label-width="formLabelWidth"
          prop="send_amount"
        >
          <el-input v-model="dialogForm.send_amount">
            <template #append
              >已付金额：{{ dialogForm.settled_amount }}
              {{ dialogForm.currency }}</template
            >
          </el-input>
        </el-form-item>
        <el-form-item
          label="* 付款银行"
          :label-width="formLabelWidth"
          prop="sys_card_id"
        >
          <el-select
            v-model="dialogForm.sys_card_id"
            placeholder="请选择平台付款银行"
            style="width: 100%"
          >
            <el-option
              v-for="item in cardSelect"
              :key="item.id"
              :label="
                '（' +
                item.card_type_name +
                '）' +
                item.card_name +
                '/' +
                item.card_number +
                '/' +
                item.bank
              "
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="付款银行" :label-width="formLabelWidth" prop="send_bank">-->
        <!--    <el-input v-model="dialogForm.send_bank" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="付款银行账号" :label-width="formLabelWidth" prop="send_card_number">-->
        <!--    <el-input v-model="dialogForm.send_card_number" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="付款人" :label-width="formLabelWidth" prop="send_card_name">-->
        <!--    <el-input v-model="dialogForm.send_card_name" />-->
        <!--</el-form-item>-->
        <el-form-item
          label="付款方式"
          :label-width="formLabelWidth"
          prop="payment_way"
        >
          <el-input v-model="dialogForm.payment_way" />
        </el-form-item>
        <el-form-item
          label="付款凭证流水号"
          :label-width="formLabelWidth"
          prop="payment_order_no"
        >
          <el-input v-model="dialogForm.payment_order_no" />
        </el-form-item>
        <el-form-item label="支付凭证图片" :label-width="formLabelWidth">
          <el-upload
            :action="uploadimgUrl"
            :data="{ project_code: 'pay_service' }"
            :show-file-list="false"
            :on-success="handleUploaderImgSuccess"
            :limit="1"
            :headers="TOKENT_HEADER"
            class="avatar-uploader"
          >
            <img
              v-if="dialogForm.payment_image"
              :src="dialogForm.payment_image_show"
              class="avatar"
              width="130"
              height="130"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer" v-if="btnType == 'audit'">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatDates } from "@/utils/utils";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";

const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      audit_order_id: "",
      order_no: "",
      review_status: "",
      review_reason: "",
      send_bank: "",
      send_card_number: "",
      send_card_name: "",
      payment_way: "",
      payment_order_no: "",
      payment_image: "",
      payment_image_show: "",
      send_amount: "",
      sys_card_id: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "",
  },
  btnType: { type: String, default: "" },
  auditHistory: { type: Array, default: [] },
  cardSelect: { type: Array, default: [] },
});
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "handleUploaderImgRequest",
]);
const handleUploaderImgSuccess = (res) => {
  emits("handleUploaderImgRequest", res, "payment_image_show");
};
const formLabelWidth = "140px";
// 校验
const rules = {
  //    order_no: [{ required: true, message: "订单流水号不能为空", trigger: "blur" }],
  review_status: [
    { required: true, message: "请选择审核结果", trigger: "blur" },
  ],
  review_reason: [
    { required: true, message: "请输入审核意见", trigger: "blur" },
  ],
};
// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign(
          {},
          {
            audit_order_id: dialogForm.audit_order_id,
            order_no: dialogForm.order_no,
            review_status: dialogForm.review_status,
            review_reason: dialogForm.review_reason,
            send_bank: dialogForm.send_bank,
            send_card_number: dialogForm.send_card_number,
            send_card_name: dialogForm.send_card_name,
            payment_way: dialogForm.payment_way,
            payment_order_no: dialogForm.payment_order_no,
            payment_image: dialogForm.payment_image,
            send_amount: dialogForm.send_amount,
            sys_card_id: dialogForm.sys_card_id,
          }
        );
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};
</script>
